{% extends "base.html" %}
{% block content %}
<h2>Wireless Positioning</h2>
<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(31.026239, 121.427068), 15);
    
        // Add 10 markers to the map at random locations
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        /*for (var i = 0; i < 10; i++) {
          var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
                                  southWest.lng() + lngSpan * Math.random());
          map.addOverlay(new GMarker(latlng));
        }*/
		{% for loc in aploc %}
			var latlng = new GLatLng({{loc.x}}, {{loc.y}});
			map.addOverlay(new GMarker(latlng));
		{% endfor %}
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
      }
    }
</script>

<div id="map_canvas" style="width: 800px; height: 500px"></div>
<div id="rightbar">
    <div class="rightcontent">
    <form action="" method="post" name="layers">
        <h4>Layers and Display </h4>
        <strong>layer:</strong><br />
        <input type= "radio" name="layer" value="lines"/>Lines <br />
        <input type= "radio" name="layer" value="photo"/>Photo <br />
        <strong>Overlay:</strong><br />
        <input type= "checkbox" name="overlay" value="ap"/>Access Point<br />
        <input type= "checkbox" name="overlay" value="cl"/>Current Location<br />
        <input type= "checkbox" name="overlay" value="tr"/>Tracing<br />
        <input type="submit" value="submit" />
    </form>
    </div>
</div>
{% endblock %}